<template>
  <div>
    <!-- 加载中 -->
    <a-spin :spinning="isLoading" />
    <!-- 申请基本内容 -->
    <div v-if="!isLoading" class="order-content">
      <!-- 快递配送 -->
      <a-card
        class="mt-20"
        :bordered="false"
      >
        <!-- 收货信息 -->
        <a-descriptions title="基本信息">
          <a-descriptions-item label="门店名称">{{ record.store_name }}</a-descriptions-item>
          <a-descriptions-item label="行业">{{ record.industry.name }}</a-descriptions-item>
          <a-descriptions-item label="门店位置">{{ record.region }} {{ record.area }}</a-descriptions-item>
          <a-descriptions-item label="申请时间">{{ record.create_at }}</a-descriptions-item>
          <a-descriptions-item label=""></a-descriptions-item>
          <a-descriptions-item label=""></a-descriptions-item>
          <a-descriptions-item label="入驻套餐">{{ record.plan.name }}</a-descriptions-item>
          <a-descriptions-item label="价格">{{ record.plan.price }} 元</a-descriptions-item>
          <a-descriptions-item label="分店数量">{{ record.plan.branch_number }} 个</a-descriptions-item>
          <a-descriptions-item label="套餐说明">{{ record.plan.introduce }}</a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card class="mt-20" :bordered="false">
        <div class="ant-descriptions-title">门店照片</div>
        <template>
          <div>
            <img
              v-for="(item, index) in record.store"
              :key="index"
              :src="item"
              style="width:20%;margin-right:15px;"
              @click="showStoreImg(index)"
            />
          </div>
        </template>
      </a-card>

      <a-card class="mt-20" :bordered="false">
        <div class="ant-descriptions-title">执照</div>
        <template>
          <div>
            <img
              v-for="(item, index) in record.license"
              :key="index"
              :src="item"
              style="width:20%;margin-right:15px;"
              @click="showLicenseImg(index)"
            />
          </div>
        </template>
      </a-card>

      <a-card class="mt-20" :bordered="false">
        <a-button type="danger" @click="goBack">返回</a-button>
      </a-card>
    </div>
  </div>
</template>

<script>
import { detail } from '@/api/store'
import { inArray } from '@/utils/util'
import { GoodsItem } from '@/components/Table'

const mediaColumns = [
  {
    title: '门店图片',
    scopedSlots: { customRender: 'imageInfo' }
  }
]

export default {
  name: 'Index',
  components: {
    GoodsItem
  },
  data () {
    return {
      // 外部方法
      inArray,
      // 正在加载
      isLoading: true,
      // ID
      id: null,
      // 订单详情
      record: {},
      mediaColumns
    }
  },
  created () {
    // 记录ID
    this.id = this.$route.query.id
    // 刷新页面
    this.handleRefresh()
  },
  methods: {
    // 刷新页面
    handleRefresh () {
      // 获取当前记录
      this.getDetail()
    },

    goBack () {
      this.$router.go(-1)
    },

    // 获取当前记录
    getDetail () {
      const { id } = this
      this.isLoading = true
      detail({ id })
        .then(result => {
          // 当前记录
          this.record = result.data
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    showStoreImg (index) {
      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: index,
        imgList: this.record.store
      })
    },

    showLicenseImg (index) {
      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: index,
        imgList: this.record.license
      })
    }
  }
}
</script>
